
<h1>Calendar</h1>
<div id='content'>
  <script type="text/javascript">
Ext.onReady(function() {

    // Add the additional 'advanced' VTypes
    Ext.apply(Ext.form.field.VTypes, {
        daterange: function(val, field) {
            var date = field.parseDate(val);

            if (!date) {
                return false;
            }
            
            if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
                
                var start = Ext.getCmp(field.startDateField);
                start.setMaxValue(date);
                start.validate();
                this.dateRangeMax = date;
            }
            else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                var end = Ext.getCmp(field.endDateField);
                end.setMinValue(date);
                end.validate();
                this.dateRangeMin = date;
            }
  
            return true;
        },

        daterangeText: 'Start date must be less than end date'
    });
    
    var fromDate = new Ext.form.DateField({
            //format: format,
            fieldLabel: '',
            id: 'fromDate',
            itemId: 'fromDate',
            name: 'fromDate',
            width: 120,
            allowBlank: false,
            vtype: 'daterange',
            readOnly: false,
            validationDelay: 3000,
            endDateField: 'toDate'// id of the 'To' date field
    });
    
    var toDate = new Ext.form.DateField({
            //format: format,
            fieldLabel: '',
            id: 'toDate',
            itemId: 'toDate',
            name: 'toDate',
            width: 120,
            allowBlank: false,
            vtype: 'daterange',
            readOnly: false,
            validationDelay: 3000,
            startDateField: 'fromDate'// id of the 'To' date field
    });
    
    fromDate.render('fromDate');
    toDate.render('toDate');
});

  </script>  
  <div id='dr'>
  </div>
  
  <hr/>
  <div id='fromDate'>
  </div>
  <div id='toDate'>
  </div>
</div>
